<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="6" v-for="item in tableData" :key="item.id" >
        <div style="border: 1px solid #ccc; padding-bottom: 10px" >
        <image-preview :src="item.picture" alt="" />
          <div style="color: #666; padding: 10px; font-size: 18px">{{item.name}}</div>
          <div style="color: orange; padding: 5px; font-size: 14px">￥ {{item.price}}</div>
          <div style="padding: 10px"><el-button type="primary">购买</el-button></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {listShop, getShop, delShop, addShop, updateShop, listDish} from "@/api/shop/shop";

export default {
  name: "Shop",
  computed: {
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 商家表格数据
        shopList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 表单参数
        form: {},
        // 表单校验
        rules: {},
        tableData: [],
        description: null,
        picture: null,
        price: null,
        shopId: null,
      };
    },
    created() {
      this.getList();
      this.load();  //获取后台商品数据
    },
    methods: {
      load(){
        this.request.get("/dish/dish",{
          Params: {
            pageNum: 1,
            pageSize: 10,
            name: null,
            picture:null
          }
        }).then(res => {
          this.tableData = res.data.records
          this.total = res.data.total
        })
      },
      /** 查询商家列表 */
      getList() {
        this.loading = true;
        listShop(this.queryParams).then(response => {
          this.shopList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          shopId: null,
          name: null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.shopId)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加商家";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const shopId = row.shopId || this.ids
        getShop(shopId).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改商家";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.shopId != null) {
              updateShop(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addShop(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const shopIds = row.shopId || this.ids;
        this.$modal.confirm('是否确认删除商家编号为"' + shopIds + '"的数据项？').then(function () {
          return delShop(shopIds);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {
        });
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('shop/shop/export', {
          ...this.queryParams
        }, `shop_${new Date().getTime()}.xlsx`)
      }
    }
  }
};
</script>
